<template>
	<div class="shopcart">
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>购物车</div>
			<router-link tag="button" to="/success">编辑</router-link>
		</header>
		<div class="shopcart_main" v-for="(data,index) in proData">
			<div class="container">
				<input type="checkbox" :value="data.cartId" v-model="selectArr" class="samecheckbox" v-bind:class="{'check':data.checked}" @click="selectedProduct(data,index)" />
				<div class="container_left">
					<img :src="data.goodsImg" />
				</div>
				<div class="container_right">
					<p class="container_right_name">{{data.goodsName}}</p>
					<p v-for="(key,item) in data.param" class="specification">规格：{{item}}{{key}}</p>
					<p v-if="data.isRevice == 0" class="specification_price">
						<span>￥{{data.originPrice}}</span>
						<span></span>
					</p>
					<p v-else-if="data.isRevice == 1" class="specification_price">
						<span>劵后￥{{data.actualpay}}</span>
						<span>￥{{data.originPrice}}</span>
					</p>
				</div>

			</div>
			<div class="shopcart-footer">
				<button @click="yh(data.id)">领券立减{{data.couponAmount}}元</button>
				<div class="cartcontrol">
					<div class="cart-decrease" @click="reduce(data)">-</div>
					<div class="cart-count" v-model="data.count">{{data.count}}</div>
					<div class="cart-add" @click="refuel(data)">+</div>
				</div>
			</div>
		</div>
		<div class="del">
			<ul>
				<li><input type="checkbox" class="newcheckbox" @click="selectAll" :checked="jsonid.length === proData.length"/>全选</li>
				<li class="sum"><span class="total-price">总计:￥{{productTotalPrice.toFixed(2)}}</span></li>
				<li class="li" @click="Paytheprice" style="background:#ff2040;color:white;">立即支付</li>
			</ul>
		</div>
	</div>
</template>
<script>
import { BaseUrl } from '../Baseurl/common.js';
import { Toast } from 'mint-ui';
export default {
	data() {
		return {
			bool: true,
			datas: [],
			proData: [],
			selectArr: [],
			token: '',
			skuid: '',
//			totalsum: '',
			productTotalPrice: 0,
			stockNum:'',
			buyNum:'1',
			arr:[],
			activePrice:'',
			jsonlist:[],
			jsonlists:[],
			jsonid:[],
			all:'',
			alljsonlist:[],
			Loading:true,
		}
	},
	created() {
		this.token = localStorage.getItem('token');
		var url = BaseUrl + 'users/myshoppingcart?token=' + this.token + '&appId=gzh';
		this.$http.get(url).then(res => {
			if(res.data.code == "10000") {
				this.Loading = false;
				this.proData = res.data.data;
			}else{
				Toast({
					message: msg.data.msg,
					position: 'middle',
					duration: 3000
				})
			}
		}).catch(error=>{
			this.Loading = false;
			Toast({
				message: "网络异常",
				position: 'middle',
				duration: 3000
			})
		})
		
	},

	methods: {
		//导航退后
		retreat:function(){
			window.history.go(-1);
//			this.$router.push({
//				path:'/personalContent'
//			})
		},
		yh:function(id) {
			this.$router.push({
				path: '/redpackage?type=1' + "&goodsId=" + id
			})
		},
		//复选框的选中
		selectAll(event) {
			var _this = this;
//			console.log(this.list);
			//判断选中的时候
			if(!event.currentTarget.checked) {
				_this.all = 1;
				_this.selectArr = [];
				_this.jsonid = _this.selectArr;
				_this.proData.forEach(function(item, i) {
				_this.$set(item,"checked", false)
				//复选框判断是否选中 当选中的时候==true
				if(event.currentTarget.checked == true) {
					//获取proData长度进行计算商品个数和价钱
					var result = 0
					for(var i = 0; i < _this.proData.length; i++) {
						if(_this.proData[i].isRevice == 1){
							result = result + _this.proData[i].count * _this.proData[i].actualpay;
						}else{
							//总的价钱= 当前的商品数量*价钱
							result = result + _this.proData[i].count * _this.proData[i].originPrice;
						}
						
					}
					_this.productTotalPrice = result;
				} else {
					//没有选中的则为0
					_this.productTotalPrice = 0;

				}
				});
			} else { //实现全选
				
				_this.all = 2;
				_this.selectArr = []; 
				_this.proData.forEach(function(item, i) {
					_this.$set(item,"checked", true)
					_this.selectArr.push(item.cartId);
					if(event.currentTarget.checked == true) {
						var result = 0
						for(var i = 0; i < _this.proData.length; i++) {
							if(_this.proData[i].isRevice == 1){
								result = result + _this.proData[i].count * _this.proData[i].actualpay;
							}else{
								//总的价钱= 当前的商品数量*价钱
								result = result + _this.proData[i].count * _this.proData[i].originPrice;
							}
						}
						_this.productTotalPrice = result;
						_this.jsonid = _this.selectArr;
					} else {
						_this.productTotalPrice = 0;
					}
				});
				
				var arr=[];
				for (var i=0;i<this.proData.length;i++) {
				 	arr.push(this.proData[i].goodsId+':'+this.proData[i].count)
				}
				this.alljsonlist = arr 
				
			}
		},
		//判断复选框的选中
		selectedProduct: function(data,index) {
			var id = data.cartId;
			if(data.checked == undefined){
				this.$set(data, "checked", true);
				var jsonlist = data.goodsId + ':' + data.count;
				this.jsonlist.push(jsonlist);
				this.jsonid.push(id);
				if(data.isRevice == 1){
					this.productTotalPrice += data.count * data.actualpay;
				}else{
					this.productTotalPrice += data.count * data.originPrice;
				}
			}else if(data.checked == true){
				data.checked = !data.checked;				
				this.jsonlist.splice( this.jsonlist.indexOf( jsonlist ), 1 )
				this.jsonid.splice( this.jsonid.indexOf( id ), 1 );
				var Price = 0;
				var jsonlist = data.goodsId + ':' + data.count;
				if(data.isRevice == 1){
					Price += data.count * data.actualpay;
				}else{
					Price += data.count * data.originPrice;
				}
				this.productTotalPrice = this.productTotalPrice - Price;
				
				for (var i=0;i<data.length;i++) {
				 	this.alljsonlist.push(data[i].goodsId+':'+data[i].count)
				}
					this.alljsonlist.splice( this.alljsonlist.indexOf( jsonlist ), 1 )
			}else if(data.checked == false){
				this.$set(data, "checked", true);
				var jsonlist = data.goodsId + ':' + data.count;
				this.jsonlist.push(jsonlist);
				this.jsonid.push(id);
				if(data.isRevice == 1){
					this.productTotalPrice += data.count * data.actualpay;
				}else{
					this.productTotalPrice += data.count * data.originPrice;
				}
			}
		},
		//立即支付跳转页面跳转到支付页面
		Paytheprice: function() {
			var alljsonlist = String(this.alljsonlist);
//			var jsonlist = String(this.jsonlist);
			
			for (var i=0;i<this.proData.length;i++) {
							
				if(this.proData[i].checked==true){
				    if(this.proData[i].isRevice == 1){
				    this.productTotalPrice += this.proData[i].count * this.proData[i].actualpay;
                                    
				}else{
				    this.productTotalPrice += this.proData[i].count * this.proData[i].originPrice;

				}
					var jsonlist = this.proData[i].goodsId + ':' + this.proData[i].count
					this.jsonlists.push(jsonlist)
				}
			}
			var jsonlists = String(this.jsonlists);
			if(this.jsonlist !=''){
				this.$router.push({
					path: '/cartPay?skuIdCounts='+ jsonlists
				})
			}else{
				if(this.all == 2){
					this.$router.push({
						path: '/cartPay?skuIdCounts='+ alljsonlist
					})
				}
			}
		},
		reduce(index) {
			this.Loading = true;
			this.productTotalPrice = 0;
            var url = BaseUrl +'goods/sku/count?skuId='+index;
            this.$http.get(url).then(res => {
//          	console.log(res)
			   if(res.data.code == "10000"){
			   		this.Loading =false;
			   	     this.stockNum = res.data.data;
 					 var val =  index.count;
					if(parseInt(val) > 1) {
					  index.count = parseInt(val) - 1;
					}
					var url = BaseUrl + 'users/adjustshoppingcartCount?appId=gzh' + '&token=' + this.token +'&goodsId=' + index.goodsId + '&count= ' + index.count;
					this.$http.post(url).then(res=>{
						if(res.data.code == '10000'){
								
						}
					})
				
				for(var i=0;i<this.proData.length;i++){
					
					if(this.proData[i].checked == true){
						if(this.proData[i].isRevice == 1){
							this.productTotalPrice +=this.proData[i].count * this.proData[i].actualpay;
						}else{
						  this.productTotalPrice +=this.proData[i].count * this.proData[i].originPrice;

						}
					}
				}
			   }
			}).catch(error=>{
				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
          	 /*for (var i=0;i<this.proData.length;i++) {
	            if(this.proData[i].checked==true){
	            	console.log(this.proData[i] ,this.proData[i].count);
	            	this.productTotalPrice =this.proData[i].count * this.proData[i].originPrice;
	            }
	        } */
          
      	},
      	
       refuel(index) {
       	this.Loading = true;
       	
			this.productTotalPrice=0;
   			  var url = BaseUrl +'goods/sku/count?skuId='+index.goodsId;
          	  this.$http.get(url).then(res => {
				   if(res.data.code == "10000"){
				   	this.Loading = false;
				   	     this.stockNum = res.data.data;
					   	   var val =  index.count;
						if(val<this.stockNum){
							 index.count++;
						}
						var url = BaseUrl + 'users/adjustshoppingcartCount?appId=gzh' + '&token=' + this.token +'&goodsId=' + index.goodsId + '&count= ' + index.count;
						this.$http.post(url).then(res=>{
							if(res.data.code == '10000'){
								
							}
						})
						for (var i=0;i<this.proData.length;i++) {
							
				            if(this.proData[i].checked==true){
				            	if(this.proData[i].isRevice == 1){
				            	    this.productTotalPrice += this.proData[i].count * this.proData[i].actualpay;
                                    
				            	}else{
				            		this.productTotalPrice += this.proData[i].count * this.proData[i].originPrice;

				            	}
				            }
				        }
				   }
				   
				  
				   
				}).catch(error=>{
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
				
				 
          	
          	  
           },
            
	}

}</script>
<style scoped="scoped">
	
body {
	background-color: #f2f2f2;
}
	.template{
		width: 100%;
		height: 100%;
		/*background: rgba(0,0,0,0.5);*/
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.navigation{
		height: 1rem;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
	}
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.navigation button{
		border:none;
		outline: none;
		background: #fafafa;
	}
ul li {
	list-style: none;
}

.value-box {
	display: inline-block;
	float: right;
	font-size: 0;
}

.minus {
	width: 0.66rem;
	height: 0.6rem;
	background: url(../assets/value_minus.png);
	background-size: 100%;
	display: inline-block;
}

.cartcontrol>div {
	line-height: 30px;
}

.cart-decrease {
	width: 70%;
	height: 30px;
	background-color: #f7f7f7;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	text-align: center;
}

.cart-count {
	width: 70%;
	height: 30px;
	margin: 0 2%;
	background-color: #e6e6e6;
	text-align: center;
}

.cart-add {
	width: 70%;
	height: 30px;
	background-color: white;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #e6e6e6;
	text-align: center;
}

.buy-num {
	width: 0.6rem;
	height: 0.6rem;
	padding: 0;
	font-size: 0.6rem;
	font-weight: lighter;
	line-height: 0.6rem;
	text-align: center;
	border: solid #eee;
	border-width: 0 0.05rem;
	border-radius: 0;
	background: #eeeeee;
	margin: 0 0.02rem;
	font-size: 0.36rem;
}

.buyval {
	display: inline-block;
	vertical-align: top;
	line-height: 0;
}

.add {
	width: 0.66rem;
	height: 0.6rem;
	background: url(../assets/value_add.png);
	background-size: 100%;
	display: inline-block;
}

.samecheckbox {
	width: 0.4rem;
	height: 0.4rem;
	margin-left: 0.3rem;
	margin-right: 0.3rem;
	
}

.shopcart {
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
}

.checkall {
	border-radius: 100%;
	border: 1px solid #989898;
	height: 0.5rem;
	margin-left: 0.2rem;
	margin-right: 0.2rem;
	width: 0.5rem;
}

.shopcart_header {
	width: 100%;
	height: 1.2rem;
	border-bottom: 1px solid gainsboro;
	display: flex;
	align-items: center;
	background: white;
	justify-content: space-between;
}

.shopcart_header p {
	margin-left: 40%;
	font-size: 0.4rem;
	font-weight: bold;
}

.shopcart_header button {
	width: 16%;
	border: 1px solid gray;
	border-radius: 3px;
	background-color: white;
	margin-right: 12%;
	background-color: white;
}

.shopcart_main {
	width: 100%;
	height: auto;
	background-color: white;
	border-top: 1px solid gainsboro;
	border-bottom: 1px solid gainsboro;
	margin-top: 0.2rem;
/*	padding-bottom: 1rem;*/
}

.shopcart-footer {
	width: 100%;
	display: flex;
	justify-content: space-around;
	margin-top: -0.1rem;
	border-top: 1px solid gainsboro;
	height: 1.2rem;
}

.shopcart-footer button {
	/*width: 32%;*/
	border: 1px solid #ff2040;
	height: 0.7rem;
	color: #ff2040;
	border-radius: 5px;
	margin-top: 0.22rem;
	background: white;
}

.shopcart .shopcart_main .shopcart_title {
	width: 98%;
	height: 1rem;
	border-bottom: 1px solid #E6E6E6;
	display: flex;
	align-items: center;
	margin-left: 2%;
}

.shopcart .shopcart_main .shopcart_title p {
	margin-left: 0.2rem;
}

.container {
	display: flex;
	width: 98%;
	/*margin-left: 2%;*/
	align-items: center;
}

.container_left {
	width: 28%;
	height: 2.1rem;
	border: 1px solid #E6E6E6;
	/*margin-left: 0.3rem;*/
}

.container_left img {
	width: 100%;
	height: 100%;
}

.container_right {
	width: 56%;
	height: 3rem;
	margin-left: 0.4rem;
}

.container_right_name {
	font-size: 0.35rem;
	line-height: 0.4rem;
	margin-top: 0.6rem;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.specification {
	font-size: 0.27rem;
	color: #808080;
	 overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.specification_price span:first-child {
	color: #ff2040;
	font-size: 0.26rem;
	margin-top: -0.3rem;
}

.specification_price span:last-child {
	color: #808080;
	font-size: 0.26rem;
	text-decoration: line-through;
}

.cartcontrol {
	width: 25%;
	display: flex;
	margin-top: 0.23rem;
}

.sum {
	color: red;
	width: 100%;
	/*margin-left: 10%;*/
}

.del {
	width: 100%;
	position: fixed;
	/*bottom: 12vh;*/
	bottom: 0vh;
	z-index: 999;
	background-color: #fff;
}

.del ul {
	border: 1px solid #ccc;
	font-size: 0;
}

.del li {
	margin-right: 0rem;
	text-align: center;
	display: inline-block;
	font-size: 0.28rem;
	/*height: 0.8rem;*/
	width: 33.3%;
	line-height: 0.8rem;
}

.checkall2 {
	margin-top: 2vh;
	width: 0.35rem;
	height: 0.35rem;
	display: block;
	border: 1px solid #555555;
	margin-left: 0.2rem;
}

.newcheckbox {
	width: 0.35rem;
	height: 0.35rem;
	position: relative;
	top: 0.08rem;
	margin-right: 0.15rem;
}</style>